<template>
	<view class="container">
		<view class="lf lf-between lf-center xjs-mt-64 xjs-ml-32 xjs-mr-32"  v-if="studioListName.length>1">
			<view class="xjs-size-32 xjs-weight-bold" @click="openStudioPopup">
				{{studioText}}
				<uni-icons :type="downUp" size="16"></uni-icons>
			</view>
			<!-- <view class="" @tap="goBankCard">
				<text class="withdrawal_text">提现银行卡</text>
				<uni-icons type="right" color="#FF6084" size="13"></uni-icons>
			</view> -->
		</view>
		<view class="content" v-if="data.list&&data.list.length>0">
			<view class="list_box" @click="goDetails(item.id)" v-for="item in data.list">
				<view class="lf list_text">
					<image class="bank_img" :src="item.receiverBankLogo"></image>
					<view class="bank_width">
						<view class="xjs-size-32 linehei1">提现到{{item.receiverBankName.split(',')[0]}}(*****{{item.receiverBankAccount.substring(item.receiverBankAccount.length-4)}})</view>
						<view class="time_text linehei1">{{item.createTime}}</view>
					</view>
				</view>
				
				<view class="xjs-weight-bold active_box">
					<view class="xjs-size-32 ">¥{{item.amount}} </view>
					<view class="xjs-mt-16 xjs-size-28 btn-color" v-if="item.tradeStatus===0||item.tradeStatus===1">待审核</view>
					<view class="xjs-mt-16 xjs-size-28" v-if="item.tradeStatus==2">提现成功</view>
					<view class="xjs-mt-16 xjs-size-28 btn-color1" v-if="item.tradeStatus==3">提现失败</view>
				</view>
			</view>
		</view>
		<view class="noRecord" v-if="data.loading">
			暂无提现记录～
		</view>
		<uni-popup ref="popupRef1" type="bottom" :is-mask-click="false" border-radius="24rpx"
			background-color="#fff">
			<view class="apply_pet">
				<view class="apply_pet_list">
					<view :class="data.studioType === item.id ? 'apply_pet_act': ''"
						v-for="(item,index) in studioListName" :key="index"
						@tap="studioBtn(item)">{{item.studioName}}
					</view>
				</view>
				<view @tap="closeStudioPopup" class="xjs-btn-primary">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref ,getCurrentInstance} from 'vue';
	import { onLoad ,onReachBottom,onNavigationBarButtonTap ,onReady} from '@dcloudio/uni-app'
	import api from '@/api'
	import { useUserStoreToRefs } from "@/store/useUserStore";
	let { userInfo } = useUserStoreToRefs();
	//监听导航右上按钮事件
	onNavigationBarButtonTap(() => {
		uni.navigateTo({
			url:'/pages/myStudio/studio/withdrawalRecord/index'
		});
	})
	const { proxy } = getCurrentInstance();
	const toggleButton = () => {
		if (data.userId != userInfo.value.id) {
			const webView = proxy.$scope.$getAppWebview();
			webView.setStyle({
				titleNView: {
					buttons: []
				}
			});
		}
	};
	const studioListName = ref([])
	const popupRef1 = ref('')
	const studioText = ref('')
	const downUp = ref('down')
	const studioBtn = (item) => {
		studioText.value = item.studioName
		data.studioType = item.id
		downUp.value = 'down'
		popupRef1.value.close()
	}
	const openStudioPopup = () => {
		downUp.value = 'up'
		popupRef1.value.open()
	}
	const closeStudioPopup = () => {
		downUp.value = 'down'
		popupRef1.value.close()
	}
	let data = reactive<any>({
		list:[],
		page:1,
		limit:10,
		loading: false,
		studioType:'',
		studioId:'',
		userId:'',
		type:'',
		finished: false,
	})	
	const getUserStudioBalanceList = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/balance/getUserStudioBalanceList/${data.userId}`
		})
		studioListName.value = res.data
		studioText.value = res.data[0].studioName
		data.studioType = res.data[0].id
		data.studioId = res.data[0].studioId
	}
	const getList =async()=>{
		uni.showLoading({
		  title: '加载中',
		  mask: true
		}) 
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/studio-balance-withdraw-record-new/page`,
			data:{
				studioId:data.studioId,
				type:data.type,
				page:data.page,
				userId:data.userId,
				limit:data.limit
			}
		})
		if (res.data.records.length != 0) {
			data.list = data.list.concat(res.data.records);
			data.finished = true
		}else{
			data.finished = false
		}
		if (data.list.length <= 0) {
			data.loading = true
		}
		uni.hideLoading()
	}
	const goDetails = (id: any)=>{
		uni.navigateTo({
			url:`/pages/income/recordDateils/index?id=${id}&type=${data.type}`
		})
	}
	onReady(() => {
		toggleButton()
	})
	// 触底
	onReachBottom(() => {
	  if (data.finished && !data.loading) {
	  	data.page++
	  	getList()
	  }
	})
	onLoad(async(e) => {
		data.userId = e.userId
		data.type = e.type
		await getUserStudioBalanceList()
		await getList()
	})
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: var(--safe-area-bottom);
		// #ifdef APP
		padding-bottom: calc(24rpx + var(--safe-area-bottom));
		// #endif
	}
	.apply_pet {
		padding: 0 32rpx;
		box-sizing: border-box;
		line-height: 1;
	
		.apply_pet_title {
			padding-top: 48rpx;
			padding-bottom: 24rpx;
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: bold;
			text-align: center;
	
			text {
				margin-right: 100rpx;
			}
		}
	
		.apply_pet_list {
			padding-bottom: 48rpx;
	
			view {
				margin-top: 40rpx;
				width: 686rpx;
				height: 92rpx;
				line-height: 92rpx;
				box-sizing: border-box;
				background-color: #F5F6F7;
				text-align: center;
				font-size: 30rpx;
				color: #5C5E5E;
				border-radius: 400rpx;
			}
	
			.apply_pet_act {
				border: 2rpx solid #FF6084;
				background-color: #fff;
				color: #FF6084;
			}
		}
	}
	.lf {
		display: flex;
	}
	.linehei1{
		line-height: 1;
	}
	.lf-between {
		justify-content: space-between;
	}
	.lf-around {
		justify-content: space-around;
	}
	.lf-center{
		align-items: center;
	}
	.noRecord{
		margin-top: 48%;
		text-align: center;
		font-size: 32rpx;
	}
	.btn-color{
		color: #FF6084;
	}
	.btn-color1{
		color: #6363FF;
	}
	.bank_width{
		width: 85%;
	}
	.content{
		background-color: #fff;
		margin: 32rpx;
		border-radius: 24rpx;
		.list_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 32rpx;
			padding: 48rpx 0;
			border-bottom: 1rpx solid #E4E6E6;
		}
		.list_text{
			width: 75%;
		}
		.list_box:last-child{
			border-bottom: 0rpx solid;
		}
		.bank_img{
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}
		.time_text{
			color: #7C807F;
			font-size: 26rpx;
			margin-top: 16rpx;
		}
		.active_box{
			text-align: right;
		}
	}
</style>